<template>
  <div class="box">
    <!--轮播表操作栏-->
    <el-form ref="form" label-width="100px" style="width: 93%">
      <el-form-item label="图层名：">
        <el-input size="mini" v-model="chooseComponent.layerName"></el-input>
      </el-form-item>
      <el-form-item label="间隔时间：">
        <el-input-number size="mini" v-model="chooseComponent.option.waitTime" controls-position="right" :min="1000"
                         :precision="0"></el-input-number>
      </el-form-item>
      <el-form-item label="轮播方式：">
        <el-select size="mini" v-model="chooseComponent.option.carousel" placeholder="请选择">
          <el-option key="single" label="单行" value="single"></el-option>
          <el-option key="page" label="一页" value="page"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="悬浮暂停：">
        <el-switch
          v-model="chooseComponent.option.hoverPause">
        </el-switch>
      </el-form-item>
    </el-form>
    <el-collapse>
      <el-collapse-item title="表头设置" name="1">
        <el-form ref="form" label-width="100px" style="width: 90%">
          <el-form-item label="开启行号">
            <el-switch
              @change="indexChange"
              v-model="chooseComponent.option.index">
            </el-switch>
          </el-form-item>
          <el-form-item label="高度：">
            <el-input-number size="mini" v-model="chooseComponent.option.headerHeight" controls-position="right"
                             :min="1"
                             :precision="0"></el-input-number>
          </el-form-item>
          <el-form-item label="背景色：">
            <avue-input-color v-model="chooseComponent.option.headerBGC"></avue-input-color>
          </el-form-item>
        </el-form>
      </el-collapse-item>

      <el-collapse-item title="列设置" name="2">
        <el-form ref="form" label-width="100px" style="width: 90%">
          <el-form-item label="显示行数：">
            <el-input-number size="mini" v-model="chooseComponent.option.rowNum" controls-position="right" :min="1"
                             :precision="0"></el-input-number>
          </el-form-item>
          <el-form-item label="奇数行背景：">
            <avue-input-color v-model="chooseComponent.option.oddRowBGC"></avue-input-color>
          </el-form-item>
          <el-form-item label="偶数行背景：">
            <avue-input-color v-model="chooseComponent.option.evenRowBGC"></avue-input-color>
          </el-form-item>
        </el-form>
      </el-collapse-item>

      <el-collapse-item title="表格设置" name="3">
        <avue-crud ref="crud"
                   :key="key"
                   :data="tableData"
                   :option="option"
                   @row-save="handleSave"
                   @row-update="handleUpdate">
          <template slot-scope="scope" slot="menu">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="openDia(scope.row,scope.index)" circle></el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" v-if="scope.index>0 || chooseComponent.option.index==false" @click="delRow(scope)" circle></el-button>
          </template>
        </avue-crud>
      </el-collapse-item>

    </el-collapse>

  </div>
</template>

<script>
  import * as u from '@/util/util'
  export default {
    name: "index",
    computed: {
      //当前选中的值
      chooseComponent() {
        return this.$store.state.chooseComponent
      },
    },
    watch:{
      "chooseComponent.data":{
        handler(newVal){
          this.chooseComponent.option.data=newVal;
        },
        deep:true,
      }
    },
    data() {
      return {
        //表格渲染标识
        key: 0,
        option: {
          page: false,
          align: 'center',
          menuAlign: 'center',
          menuWidth: 90,
          height: 200,
          editBtn: false,
          delBtn: false,
          column: [
            {
              label: '列名',
              type: "input",
              prop: 'name',
              overHidden: true,
              width: 70,
            },
            {
              label: '对齐方式',
              prop: 'align',
              type: "select",
              width: 70,
              overHidden: true,
              dicData: [
                {value: "left", label: '左对齐'},
                {value: "center", label: '居中'},
                {value: "right", label: '右对齐'}
              ]
            },
            {
              label: '列宽',
              hide: true,
              type: "input",
              overHidden: true,
              prop: 'width',
            },
          ]
        },
        tableData: [],
      }
    },
    created() {
      this.init();
    },

    methods: {


      /**
       * 初始化
       */
      init() {
        //处理表格数据
        this.dealWithTableData();
        this.chooseComponent.option.data= u.copyBean(this.chooseComponent.data);
      },

      /**
       * 初始化处理表格数据
       */
      dealWithTableData() {
        this.tableData.push({
          id: "-1",
          name: this.chooseComponent.option.indexHeader,
          align: this.chooseComponent.option.align[0],
          width: this.chooseComponent.option.columnWidth[0],
        })
        //循环header
        this.chooseComponent.option.header.forEach((x, i) => {
          this.tableData.push({
            id: i,
            name: x,
            align: this.chooseComponent.option.align[i],
            width: this.chooseComponent.option.columnWidth[i],
          })
        })
      },

      /**
       * 打开表格编辑弹窗数据
       * @param row
       */
      openDia(row, index) {
        if (row == null) {
          this.$refs.crud.rowAdd();
        } else {
          this.$refs.crud.rowEdit(row,index)
        }
      },

      /**
       * 新增保存
       * @param row 行数据
       * @param done 完成回调
       * @param loading 加载回调
       */
      handleSave: function (row, done, loading) {
        //保存表数据
        this.tableData.push(row);
        this.reverseTableData();
        //新增一列数据
        this.chooseComponent.option.data.forEach(x=>{
          x.push("*");
        })
        done();
        loading();
      },

      /**
       * 删除一条数据
       * @param scope
       */
      delRow(scope) {
        this.tableData.splice(scope.index, 1);
        //并且删除配置中data的数据
        //判断是否有序号
        if(this.chooseComponent.option.index){
          this.chooseComponent.option.data.forEach(x=>{
            x.splice(scope.index-1,1);
          })
        }else{
          this.chooseComponent.option.data.forEach(x=>{
            x.splice(scope.index,1);
          })
        }
        this.reverseTableData();
      },

      /**
       * 修改保存
       * @param row 行数据
       * @param index 行索引
       * @param done 完成回调
       * @param loading 加载回调
       */
      handleUpdate: function (row, index, done, loading) {
        this.tableData[row.$index] = row;
        this.reverseTableData();
        this.key++;
        done();
        loading();
      },

      /**
       * 将表格数据翻转为组件数据
       */
      reverseTableData() {
        //判断是否有序号
        if(this.chooseComponent.option.index){
          this.chooseComponent.option.indexHeader = this.tableData[0].name;
          this.chooseComponent.option.header = this.tableData.filter((x,i)=>i>0).map(x => x.name);
          this.chooseComponent.option.align = this.tableData.map(x => x.align);
          this.chooseComponent.option.columnWidth = this.tableData.map(x => x.width);
        }else{
          this.chooseComponent.option.header = this.tableData.map(x => x.name);
          this.chooseComponent.option.align = this.tableData.map(x => x.align);
          this.chooseComponent.option.columnWidth = this.tableData.map(x => x.width);
        }
      },

      /**
       * 开关变化的函数
       * @param val
       */
      indexChange(val){
        if(val){
          //开启序号
          this.tableData.unshift({
            id: "-1",
            name: this.chooseComponent.option.indexHeader,
            align: "center",
            width: 50
          })
        }else{
          //关闭序号
          this.tableData.splice(0,1);
        }
        this.reverseTableData();
      }

    }
  }
</script>

<style scoped lang="scss">
  .box {
    width: 100%;
    flex: 1;
    color: white;

    ::v-deep .el-form-item__label {
      color: white;
    }

    ::v-deep .el-collapse-item__header {
      background-color: #545c64;
      color: white;
    }

    ::v-deep .el-collapse-item__content {
      background-color: #545c64;
      color: white;
    }

    ::v-deep .el-radio__label {
      color: white;
    }
  }
</style>
